<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .warp {
      height: 100%;
      width: 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      /*display: grid;*/
      /*align-items: center;*/
      /*justify-content: center;*/
    }

    .container {
      /*position: absolute;*/
      /*top: 50%;*/
      /*left: 50%;*/
      /*transform: translate(-50%, -50%)*/
    }
  </style>
</head>
<body>
<div class="warp">
  <div class="container">
    <input id="input" onchange="sort()" type="text">
    <button onclick="sort()">点我排序</button>
  </div>
</div>
<script>
  function sort() {
    let arr = document.getElementById('input').value
    //字符串转为整型数组
    arr = arr.split(' ').map(Number)

    let tempArr = arr
    let length = arr.length
    console.log('原始数组: ', arr)
    console.log('备份数组: ', tempArr)
    let temp;

    for (let i = 0; i < length; i++) {
      for (let j = 0; j < length - 1 - i; j++) {
        if (arr[j] > arr[j + 1]) {
          // 解构赋值交换位置
          [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
        }
      }
    }
    console.log('手动排序: ', arr.join(' ') + '\n')
    //由于sort默认是按照Unicode编码来排序，所以可能会出现以下情况：不指定sort的返回函数时，直接sort函数会出现错误情况，会按照字符串去比较每一项。
    //a-b: 前一项减后一项 如果是负的就交换位置 正的就不变
    console.log('sort排序: ', tempArr.sort((a, b) => a - b).join(' '))
  }
</script>
</body>
</html>
